<style lang="sass" scoped>
    .img{
        width:120px;
    }
</style>
<template>
    <div  class="container">
        <div class="search-cont">
            <!-- <el-input placeholder="请搜索" v-model.trim="search.keyWord">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input> -->
            <el-select v-model="search.companyCode" placeholder="请选择分销商">
                <el-option v-for="item in companyList" :key="item.companyCode" :label="item.companyName" :value="item.companyCode">
                </el-option>
            </el-select>
            <el-date-picker v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyyMMdd"
                value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
            <el-button @click="getList()" type="primary" :plain="false">搜索</el-button>
        </div>
        <div class="tabs-cont">
            <el-button
                @click="search.status=''" 
                :type="search.status===''?'primary':''">全部</el-button>
            <el-button
                @click="search.status=0" 
                :type="search.status===0?'primary':''">正在提现</el-button>
            <el-button
                @click="search.status=1" 
                :type="search.status===1?'primary':''">提现成功</el-button>
        </div>
        <div class="table-cont">
            <el-table :data="list" style="width: 100%">
                <el-table-column prop="withdrawNo" label="提现单号">
                </el-table-column>
                <el-table-column prop="companyName" label="分销商名称">
                </el-table-column>
                <el-table-column prop="withdrawFee" label="提现金额">
                </el-table-column>
                <el-table-column prop="balance" label="提后余额">
                </el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="props">
                        {{props.row.status===0?'正在提现':'提现成功'}}
                    </template>
                </el-table-column>
                <el-table-column prop="applyTime" label="申请时间">
                </el-table-column>
                <el-table-column width="260" label="操作">
                    <template slot-scope="props">
                        <el-button @click="routerGo('dis_getcur_detail',{withdrawNo:props.row.withdrawNo})"  type="primary" :plain="false" size="small">详情</el-button>
                        <el-button @click="payShow(props.row)" type="primary" :plain="false" size="small">提现</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next" :total="search.total" @current-change="handleCurrentChange">
            </el-pagination>
        </div>

        <!-- 新增/修改类目 -->
        <el-dialog title="转账" :visible.sync="payObj.show">
            <el-form label-width="80px">
                <el-form-item label="上传凭证:">
                    <upload-image :data.sync="payObj.credentialUrl" :limit="1"></upload-image>
                </el-form-item>
                <div class="tc mt20">
                    <el-button @click="pay()" type="primary">转账</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
    import uploadImage from 'components/uploadImage'

    export default {
        components: {
            uploadImage
        },
        data() {
            return {
                //列表搜索参数
                search:{
                    companyCode:'',//	是	string	搜索关键字
                    status:'',//	是	string	状态，0-正在提现，1-提现成功
                    pageNo:1, //	是	string	页码
                    pageSize:config.pageSize, //	是	string	当前页显示的条数
                    total:0,
                },
                list:[],
                dateValue:'',
                companyList:[],
                payObj:{
                    show:false,
                    withdrawNo:'',//	是	string	提现单号
                    credentialUrl:[],//	是	string	凭证URL
                }
            };
        },
        watch:{
            'search.status'(val){
                this.getList();
            },
            'dateValue'(val){
                let dates = JSON.parse(JSON.stringify(val));
                Object.assign(this.search,{
                    startTime:dates[0],
                    endTime:dates[1],
                })
            },
        },
        created(){
            server.getCompanyList().then(res=>{
                this.companyList = res;
            })
        },
        mounted() {
            this.$nextTick(() => {
                this.getList();
            });
        },
        methods: {
            handleCurrentChange(val) {
                this.search.pageNo = val;
                this.getList();
            },
            getList() {
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url: config.baseApi + "bookMall-admin/api/withdraw/getWithdrawRecordListPage",
                    data: param,
                    success: data => {
                        this.list = data.data.record;
                        this.search.total = data.data.totalNum;
                    }
                });
            },
            payShow(item){
                this.payObj = {
                    show:true,
                    withdrawNo:item.withdrawNo,//	是	string	提现单号
                    credentialUrl:[],//	是	string	凭证URL
                }
            },
            pay(){
                let param = JSON.parse(JSON.stringify(this.payObj));
                param.credentialUrl = param.credentialUrl.toString();
                if(param.credentialUrl===''){
                    popup.alert({content:'请上传交易凭证'});
                    return;
                }
                util.ajax({
                    url:config.baseApi + 'bookMall-admin/api/withdraw/transfer',
                    data:param,
                    success:(data=>{
                        popup.miss({content:'转账成功！'})
                        this.payObj.show = false;
                    })
                })
            }
        },
        
    };
</script>